<template>
  <div class="container" :loading="loading">
    <div class="card">
      <div class="header">
        <div>党组织配置</div>
        <div class="operate">
          <el-pagination background layout="total, sizes, prev, pager, next"
                         :total="totalCount" v-model:page-size="pageSize" :page-sizes="[20, 40, 60, 100, 200, 400, 600]"
                         @size-change="handleSizeChange" @current-change="onCurrentClick"/>
          <el-button type="warning" @click="reloadData">刷新</el-button>
          <el-button type="primary" @click="addRankAdjust">新增</el-button>
        </div>
      </div>
      <div class="body">
        <el-table class="party" :data="rankData" border :key="needFlashData"
                  :header-cell-style="{'text-align': 'center'}"
                  @row-dblclick="editOperate"
                  empty-text="请添加党组织配置" style="width: 100%;height: 100%">
          <el-table-column type="index" label="序号" align="center" width="80"/>
          <el-table-column prop="name" label="名称" align="center" min-width="100"/>
          <el-table-column prop="name" label="部门" align="center" min-width="100">
            <template #default="scope">
              {{departmentId2Name(scope.row)}}
            </template>
          </el-table-column>
          <el-table-column prop="operate" label="操作" align="center" width="120">
            <template #default="scope">
              <div style="display: flex;justify-content: space-around; flex-direction: row-reverse;gap: 20px">
                <el-link :underline="false" type="danger" v-on:click="deleteOperate(scope.row)">删除</el-link>
                <el-link :underline="false" type="primary" v-on:click="editOperate(scope.row)">修改</el-link>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <name-info v-model:visible="showNameInfo" :data="editNameInfo" :operate="addOrEdit" @reload:data="reloadData"></name-info>
  </div>
</template>

<script lang="ts">
export default {
  name: "NameConfig"
}
</script>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import {useUserStore} from "@/store/user";
import {IPartyName} from "@/iwb/IParty";
import {DialogUtils} from "@/utils/DialogUtils";
import {deletePartyName, getPartyName} from "@/api/party";
import NameInfo from "@/components/party/NameInfo.vue";
import {IDept} from "@/iwb/IConfig";
import {getDepartment} from "@/api/config";

const loading = ref(false);
const pageIndex = ref(0);
const pageSize = ref(40);
const totalCount = ref(0);
const needFlashData = ref(false);
const rankData = ref([] as Array<IPartyName>)
const showNameInfo = ref(false);
const editNameInfo = ref({} as IPartyName);
const addOrEdit = ref('add');

const handleSizeChange = (size: number) => {
  pageIndex.value = 0;
  totalCount.value = 0;
  const index = pageIndex.value;
  pageSize.value = size;
  const userStore = useUserStore();
  if (totalCount.value > index * size || pageIndex.value ===0) {
    getPartyName(pageIndex.value + 1, pageSize.value).then((res: any) => {
      totalCount.value = res.data.total;
      rankData.value = res.data.names;
    })
  }
}

const onCurrentClick = (value: number) => {
  console.log(value);
  const index = value - 1;
  const size = pageSize.value;
  pageIndex.value = index;
  const userStore = useUserStore();
  if (totalCount.value > index * size || pageIndex.value ===0) {
    getPartyName(pageIndex.value + 1, pageSize.value).then((res: any) => {
      totalCount.value = res.data.total;
      rankData.value = res.data.names;
    })
  }
}

const reloadData = () => {
  pageIndex.value = 0;
  totalCount.value = 0;
  const index = pageIndex.value;
  const size = pageSize.value;
  if (totalCount.value > index * size || pageIndex.value ===0) {
    getPartyName(pageIndex.value + 1, pageSize.value).then((res: any) => {
      totalCount.value = res.data.total;
      rankData.value = res.data.names;
    })
  }
}

/**
 * 新镇等次调整
 */
const addRankAdjust = () => {
  showNameInfo.value = true;
  addOrEdit.value = 'add';
  editNameInfo.value.name = '';
  editNameInfo.value.code = 0;
}

const deleteOperate = (row: IPartyName) => {
  DialogUtils.showMessageBox('温馨提示', '是否确定删除等次配置:['+row.name+']', {type: 'warning'}).then(()=>{
    deletePartyName(row.id).then(()=>{
      reloadData();
    }).catch(error=>console.error(error));
  })
}

const editOperate = (row: IPartyName) => {
  showNameInfo.value = true;
  editNameInfo.value = row;
  addOrEdit.value = 'edit';
}

const departmentId2Name = (row: IPartyName) => {
  const dept: Array<IDept> = deptTree.value.filter(item => item.id === row.departmentId);
  if (dept && dept.length === 1) {
    return dept[0].name;
  }
  return '';
}

const deptTree = ref([] as Array<IDept>);

const reloadDeptTree = () => {
  loading.value = true;
  getDepartment().then(res => {
    deptTree.value = res.data;
    loading.value = false;
  }).catch(error => {
    console.error(error);
    loading.value = false;
  })
}

onMounted(()=> {
  reloadData();
  reloadDeptTree();
})

</script>

<style scoped lang="scss">
@import "src/styles/variable";

.container {
  width: auto;
  height: 100%;
  padding: 10px;
  background-color: $color-background-base;
  border: 0;
  box-sizing: border-box;
}

.header {
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid $color-border-base;
}

.card {
  width: 100%;
  height: 100%;
  background-color: $color-sub-background-base;
  overflow: auto;
}

.operate {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid $color-border-base;
}

.body {
  height: calc(100% - 54px);

  .party {
    width: auto;
  }
}
</style>